<template>
	<view class="content">
    <view class="topchoose" v-if="dataList.length&&dataList[0].is_xiaozhang==1">
      <view>
        <u-checkbox v-show="isshowchose" @change="onAllSel" v-model="allchecked" :checked="allchecked" :disabled="false" shape="circle" class="chooseall">
          全选
          <text
              class="chooseed" v-if="totalCount>0">（已选择{{ totalCount }}条议题）</text>
        </u-checkbox>
      </view>
      <view class="choosetopics" @click="isshowchose=!isshowchose">{{isshowchose?'取消':'选择议题'}}</view>
    </view>
		<view class="list" v-if="dataList.length">
			<view class="list-item" v-for="(item,index) in dataList" :key="index">
        <u-checkbox v-if="isshowchose"  class="chooseOne" v-model="item.ischecked" :checked="item.ischecked" :topicsid="item.id" @change="choosetopics($event,item,index)" :disabled="false" shape="circle"></u-checkbox>
        <view class="user u-flex">
					<u--image :src="item.user.avatar" shape="circle" width="44rpx" height="44rpx">
					</u--image>
					<text>{{item.user.nickname}}</text>
				</view>
				<view class="title">
					{{item.content}}
				</view>
				<view class="images">
					<view class="iamges-item u-flex" v-for="(zitem,zindex) in item.files" :key="zindex">
						<!-- <view class="new-tip">
							更新
						</view> -->
						<!-- <u--image v-if="zitem.is_img == 1" :src="zitem.fullurl" radius="16rpx" width="136rpx" height="136rpx">
						</u--image> -->

						<!-- <view v-if="zitem.is_img == 0" class="file-box u-flex" @click.stop="handleDownload(zitem)">
							<u-icon name="attach" color="#4871C0" size="24"></u-icon>
							<text class="file-text">{{zitem.filename}}</text>
						</view> -->
						<view class="file-box u-flex" @click.stop="handleDownload(zitem)">
							<u-icon name="attach" color="#4871C0" size="24"></u-icon>
							<text class="file-text">{{zitem.filename}}</text>
						</view>
					</view>
				</view>
				<!-- <view class="file-box u-flex" @click.stop="handleDownload(item.files)">
					<u-icon name="attach" color="#4871C0" size="24"></u-icon>
					<text class="file-text">{{item.files.filename}}</text>

				</view> -->
				<view class="step-box">

					<u-steps current="1" direction="column">
						<view class="" v-for="(sitem,sindex) in item.check" :key="sindex">
							<u-steps-item :title="sitem.check_text" :desc="sitem.createtime_text"
								:contents="sitem.content">
								<text v-if="sitem.status == 1" class="slot-icon" slot="icon">
									<u-icon name="checkmark-circle" color="#4871C0" size="20"></u-icon>
								</text>
								<text v-if="sitem.status == 0" class="slot-icon" slot="icon">
									<u-icon name="close-circle" color="#FF7A00" size="20"></u-icon>
								</text>
							</u-steps-item>
							<!--              <view class="reject">-->
							<!--                {{sitem.content}}-->
							<!--              </view>-->
						</view>
					</u-steps>

				</view>
				<view class="buttons u-flex" v-if="item.status == 2 && item.is_xiaozhang==1">
					<view class="button-box button1" @click="rejectTopicFun(item.id)">
						驳回
					</view>
					<view class="button-box button2" @click="adoptTopicFun(item.id)">
						同意上会
					</view>
				</view>
			</view>
		</view>
    <view class="button" @click="agreeTopicsHeader()" v-if="isshowchose">
      同意上会
    </view>
		<!-- 加载更多 -->
		<u-loadmore v-if="dataList.length" :status="loadStatus" />

		<u-empty v-if="!dataList.length && !isLoading" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
		</u-empty>

		<!-- 驳回弹窗 -->
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" title="驳回理由" confirmText="确定"
			:showCancelButton="true">
			<view class="slot-content reason-content">
				<u--textarea v-model="reason" height="100" placeholder="请驳回理由~" border="surround" confirmType="done">
				</u--textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		getTopicList,
		operationTopic,
		operationTopic2,
	} from '@/api/meetApi.js'
  import {agreeALLtopics} from "../../../api/meetApi";
	export default {
		data() {
			return {
				id: '',
				page: 1,
				limit: 12,
				lastPage: 0,
				loadStatus: '',
				dataList: [],
				show: false,
				reason: '',
				chooseId: '',
        allchecked:false,
        isshowchose:false,
			}
		},
    computed:{
      totalCount(){
        let params = [];
        this.dataList.forEach((item)=>{
          if(item.ischecked){
            params.push(item.id)
          }
        })
        return params.length
      }
    },
    onReachBottom: function() {
      if (this.page < this.lastPage) {
        this.page += 1;
        this.getData();
      }
    },
		onLoad(options) {
			this.id = options.id;
			this.getData();
		},
		onShow() {
		},
		methods: {
      onAllSel() {
        let that = this;
        console.log("=====that.dataList",that.dataList)
        that.allchecked = !that.allchecked;
        that.dataList.map((item,index)=>{
          item.ischecked =  that.allchecked
        })
        console.log("=====that.dataList",that.dataList)
      },
      choosetopics(e,item,index){
        item.ischecked = !item.ischecked
        this.$set(this.dataList,index,item)
        this.allchecked = this.dataList.every((item)=>{
          return item.ischecked == true
        })
      },
      agreeTopicsHeader(){
        var that = this;
        let params = {ids:[]};
        this.dataList.forEach((item)=>{
          if(item.ischecked){
            params.ids.push(item.id)
          }
        })
        agreeALLtopics(params).then(res => {
          if (res.code == 1) {
            uni.showToast({
              title: '已同意上会',
              icon: "none",
              duration: 1000
            });
            that.allchecked = false;
            that.isshowchose = false;
            that.dataList = [];
            that.getData();
          }
        })
      },
			// 获取数据
			getData() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					page: this.page,
					check_type: 'topic',
					limit: this.limit,
					meet_id: this.id
				};
				getTopicList(params).then(res => {
					if (res.code == 1) {
						this.isLoading = false;
						uni.stopPullDownRefresh();
						this.lastPage = res.data.last_page
            res.data.data.map(item=>{
              if(this.allchecked){
                item.ischecked = true
              }else{
                item.ischecked = false
              }
            })
						this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
						this.dataList = [...this.dataList, ...res.data.data]
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 3500
						});
					}

				})
			},
      // 点击附件预览
      handleDownload(item) {
        console.log("=====item",item)
        let params={
          url:item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
          name:item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
          size:item.filesize,// 需要预览文件的字节大小(必填)
          type:item.mimetype
        }
        this.$store.dispatch('yulan',params)
      },
			// 取消
			cancel() {
				this.show = false;
				reason: ''
			},
			// 驳回
			rejectTopicFun(id) {
				this.show = true;
				this.chooseId = id;
			},
			// 驳回
			confirm() {
				this.isLoading = true;
				let params = {
					topic_id: this.chooseId,
					status: 0,
					content: this.reason
				};
				operationTopic2(params).then(res => {
					this.isLoading = false;
					console.log(res)
					this.show = false;
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
					this.dataList = [];
					this.getData()
				})
			},
			// 通过
			adoptTopicFun(id) {
				this.isLoading = true;
				let params = {
					topic_id: id,
					status: 1,
				};
				operationTopic2(params).then(res => {
					this.isLoading = false;
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 1000
					});
					this.dataList = []
					this.getData()
				})

			}
		}
	}
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
	}
  .topchoose{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:20rpx 30rpx 0;
  }
  .choosetopics{
    font-size: 24rpx;
  }
  .chooseed{
    font-size: 24rpx;
    margin-left: 10rpx;
    color: #ccc;
  }
	.u-flex {
		display: flex;
		align-items: center;
	}

	.list {
		padding: 20rpx 30rpx;
	}

	.list-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		opacity: 1;
		padding: 30rpx;
		margin-bottom: 20rpx;
    position: relative;
  }
  .chooseOne{
    position: absolute;
    right: 20rpx;
    top: 30rpx;
    z-index: 200;
  }
	.user text {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
		margin-left: 10rpx;
	}

	.title {
		margin-top: 20rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 52rpx;
	}

	.images {
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.iamges-item {
		margin-right: 40rpx;
		position: relative;
	}

	.file-box {
		position: relative;
		margin: 20rpx 0;
		padding: 20rpx;
		background: #F8F9FC;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
	}

	.file-text {
		display: inline-block;
		word-break: break-all
	}

	.button-box {
		width: 128rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 16rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: 500;
		margin-top: 20rpx;
	}

	.button1 {
		color: #4871C0;
		border: 1px solid #4871C0;
		margin-left: auto;
	}

	.button2 {
		color: #FFFFFF;
		background: #4871C0;
		margin-left: 20rpx;
	}

	.new-tip {
		position: absolute;
		top: 0;
		right: 0;
		width: 56rpx;
		height: 32rpx;
		line-height: 32rpx;
		background: #FF7A00;
		border-radius: 0px 16rpx 0px 10rpx;
		opacity: 1;
		font-size: 18rpx;
		color: #fff;
		z-index: 22;
		text-align: center;
	}

	.reject {
		padding-left: 42rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 52rpx;
	}

	.reason-content {
		width: 100%;
		border-radius: 8rpx;
		opacity: 1;
	}

	/deep/ .u-modal__content {
		text-align: center !important;
	}

	/deep/.u-textarea {
		background: #F8F8F8;
		border-radius: 8rpx;
		opacity: 1;
		text-align: left;
	}

	/deep/.uni-textarea-placeholder {
		text-align: left;
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}

	/deep/.u-steps-items {
		flex-direction: row !important;
		width: 100%;

	}

	/deep/ .u-steps-item__content {
		width: 100%;
	}

	/deep/ .u-steps-item__content .u-text {
		width: 100%;
	}
  .button {
    background: #4871C0;
    border-radius: 8rpx;
    opacity: 1;
    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    padding: 30rpx 0;
    position: fixed;
    width: calc(100% - 60rpx);
    bottom: 10rpx;
    left: 30rpx;
  }
</style>
